<template>
	<view class="nft_container_bg">
		<view class="payNft">
			<!-- 充值金额提醒 -->
			<view class="pay_tip">
				<view class="pay_tip_title">支付金额</view>
				<view class="pay_tip_money">
					<u-icon name="rmb" size="28"></u-icon>
					<view class="">{{totalAmount}}</view>
				</view>
			</view>
			<!-- 充值方式 -->
			<view class="payment_methods">
				<view class="payment_methods_title">选择支付方式</view>
				<view class="fs tools" @tap="payment('fs')">
					<image src="../../static/img/hyPay.png" mode="" style="width: 60rpx; height: 60rpx;"></image>
					<view class="tools_title">火源支付</view>
					<radio :checked="paytype=='fs'" color="var(--echo-main-color)" />
				</view>
				<view class="weChat tools" @tap="payment('cny')">
					<u-icon name="weixin-fill" size="30px"></u-icon>
					<view class="tools_title">微信支付</view>
					<radio :checked="paytype=='cny'" color="var(--echo-main-color)" />
				</view>
			</view>
			<!-- 确认支付 -->
			<view class="">
				<u-button :text="paymentBtnText" color="var(--echo-main-color)" class="pay_btn" @click="submitPay"
					:disabled="isdisabled">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createPurchaseOrder
	} from '@/config/nftApi.js';
	export default {
		data() {
			return {
				paytype: 'cny', //支付类型,
				openid: '',
				// 商品总价
				totalAmount: 0,
				// 商品编号
				serialNo: '',
				// 支付按钮的文字
				paymentBtnText: '确认支付',
				// 支付按钮是否可以点击
				isdisabled: false,
			}
		},
		onLoad({
			totalAmount,
			serialNo
		}) {
			this.totalAmount = totalAmount
			this.serialNo = serialNo
		},
		created() {
			this.openid = uni.getStorageSync('openid')
			console.log('this.openid', this.openid)
		},
		methods: {
			// 支付方式切换
			payment(type) {
				this.paytype = type
				if (type === 'fs') {
					this.isdisabled = true
					this.paymentBtnText = "支付方式正在开发"
					return
				}
				this.isdisabled = false
				this.paymentBtnText = "确认支付"
			},
			async submitPay() {
				if (!this.openid) {
					uni.$u.toast('请先登陆')
					return
				}
				const res = await createPurchaseOrder({
					openid: this.openid,
					// 商品编号
					goodsId: this.serialNo,
					// 数量
					quantity: this.totalAmount,
					// 支付方式
					ccy: this.paytype
				})
				console.log('res', res)
				let {
					appId,
					nonceStr,
					packageValue,
					paySign,
					timeStamp
				} = res.data
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": appId, //公众号ID，由商户传入
						"timeStamp": timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": nonceStr, //随机串
						"package": packageValue,
						"signType": "MD5", //微信签名方式：
						"paySign": paySign //微信签名
					},
					function(res) {
						console.log('pay res', res)
						if (data.err_msg === 'get_brand_wcpay_request:ok') {
							console.log("支付成功")
							uni.navigateTo({
								url: "/pages/my/myOrder"
							})
						} else if (data.err_msg === 'get_brand_wcpay_request:cancel') {
							console.log("用户取消支付")
						} else if (data.err_msg === 'get_brand_wcpay_request:fail') {
							console.log("支付失败")
						}

					});
			}
		}
	}
</script>

<style lang="scss">
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;

		.payNft {
			padding: 0 40rpx;
			color: #fff;

			// 充值金额提醒
			.pay_tip {
				text-align: center;
				padding: 100rpx 0;

				&_title {
					font-size: 30rpx;
				}

				&_money {
					display: flex;
					justify-content: center;
					margin-top: 40rpx;
					font-size: 46rpx;
				}
			}

			// 充值方式
			.payment_methods {
				padding: 40rpx 0;

				.payment_methods_title {
					font-size: 34rpx;
					margin-bottom: 30rpx;
				}

				.fs {
					padding-bottom: 40rpx;
					border-bottom: solid 0.5px #eee;
				}

				.weChat {
					padding-top: 40rpx;
				}

				.tools {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;

					.tools_title {
						width: 65%;
					}
				}
			}

			.pay_btn {
				margin-top: 60rpx;
			}
		}
	}
</style>
